/**
 * 功能描述: ywBaseCard样式
 * @author 赵常畅
 * @date 2022/9/23 9:28
 * @version 1.0
 */

@import "../../style/index";
@import "cardConstant";

// 基础card
@mixin card--layout {
//  布局
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  line-height: 1.5715;
  position: relative;
}
@include b(card) {
  // 样式
  color: $--card-font-color;
  font-size: $--card-font-size;
  font-variant: tabular-nums;
  list-style: none;
  font-feature-settings: 'tnum';
  background: $--card-background-color;
  border-radius: $--card-border-radius;
  // 引入布局
  @include card--layout;
}

// 带边框card
@include b(card-bordered) {
  border: $--card-border;
}

// 卡片头
@mixin card-head--layout {
//  布局
  min-height: 48px;
  margin-bottom: -1px;
  padding: 0 24px;
  // 伪类样式 内部前面
  &::before {
    display: table;
  }
  // 伪类样式 内部后面
  &::after {
    display: table;
    clear: both;
  }
}
@include b(card-head) {
  // 样式
  color: $--card-font-color;
  font-weight: $--card-head-font-weight;
  font-size: $--card-head-font-size;
  background: transparent;
  border-bottom: $--card-head-border-bottom;
  border-radius: $--card-head-border-radius;
  // 伪类样式 内部前面
  &::before {
    content: '';
  }
  // 伪类样式 内部后面
  &::after {
    content: '';
  }
  // 引入布局
  @include card-head--layout;
}

// 卡片头容器
@include b(card-head-wrapper) {
  // 布局
  display: flex;
  align-items: center;
}

// 卡片头 标题
@mixin head-title--layout {
//  布局
  display: inline-block;
  flex: 1;
  padding: 16px 0;
}
@include b(card-head-title) {
  // 样式
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  // 引入布局
  @include head-title--layout;
}

// 卡片右上角操作区域
@mixin card-extra--layout {
  // 布局
  margin-left: auto;
  padding: 16px 0;
  float: right;
}
@include b(card-extra) {
  // 样式
  color: $--card-extra-font-color;
  font-weight: $--card-extra-font-weight;
  font-size: $--card-extra-font-size;
  // 引入布局
  @include card-extra--layout;
}

// 卡片主体
@mixin card-body--layout {
//  布局
  padding: 24px;
  //主体内部的前面
  &::before {
    display: table;
  }
  //内部的后面
  &::after {
    display: table;
    clear: both;
  }
}
@include b(card-body) {
  // 样式
  // 内部前面
  &::before {
    content: '';
  }
  // 内部后面
  &::after {
    content: '';
  }
//  引入布局
  @include card-body--layout;
}

// 小尺寸卡片
@mixin card-small--layout {
  // 布局
  // 子元素 头部
  & > .#{$namespace}-card-head {
    min-height: 36px;
    padding: 0 12px;
    // 头部最外层容器
    & > .#{$namespace}-card-head-wrapper {
      // 头部标题
      & > .#{$namespace}-card-head-title {
        padding: 8px 0;
      }
      // 头部额外操作区域
      & > .#{$namespace}-card-extra {
        padding: 8px 0;
      }
    }
  }
  // 卡片主体
  & > .#{$namespace}-card-body {
    padding: 12px;
  }
}
@include b(card-small) {
  // 样式
  // 头部
  & > .#{$namespace}-card-head {
    font-size: $--card-small-font-size;
    // 最外层容器
    & > .#{$namespace}-card-head-wrapper {
      // 额外操作区域
      & > .#{$namespace}-card-extra {
        font-size: $--card-small-font-size;
      }
    }
  }
  // 引入布局
  @include card-small--layout;
}